<template>
<div>
  <div class="header-group">
    <div class="nav-hand pull-left" @click="setNavToggle">
      <span class="icon-menu_fold"  v-show="navToggle"></span>
      <span class="icon-menu_unfold"  v-show="!navToggle"></span>
    </div>
    <div class="level-1 pull-left" :style="navList.children && navList.children.length > 0 ? '' : 'border-right: 0'" >
      {{pageName}}
<!--      系统管理-->
    </div>
    <ul class="level-2 pull-left">
      <li class="pull-left" :key="item.menuName" :class="isSelect.indexOf(item.id) > -1 ? 'select' : ''" v-for="item in navList.children" v-if="item.menuType == 1">
        <span @click="()=> {goPath(item)}">{{item.menuName}}</span>
        <div class="liopacityBox"></div>
        <div class="level-3-box clearfix" :ref="item.menuPath" v-if="item.children && item.children.filter(d => d.menuType==1).length > 0">
          <ul class="level-3">
            <li v-for="itemChild in item.children" :class="isSelect.indexOf(itemChild.id) > -1 ? 'select' : ''" v-if="itemChild.menuType == 1">
              <span @click="()=> {goPath(itemChild)}">{{itemChild.menuName}}</span><span v-if="itemChild.children" class="icon-arrow_down_line child-icon"></span>
              <div class="level-4-box clearfix" v-if="itemChild.children && itemChild.children.filter(d => d.menuType==1).length > 0">
                <ul class="level-4">
                  <li v-for="forChild in itemChild.children" :class="isSelect.indexOf(forChild.id) > -1 ? 'select' : ''" v-if="forChild.menuType == 1">
                    <span @click="()=> {goPath(forChild)}">{{forChild.menuName}}</span>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <div class="user-info clearfix">
      <div class="user-name-box pull-right clearfix">
        <span class="icon-box color-change" @click="showHandFn"><i class="icon-user"></i></span>
        <span class="user-name color-change" @click="showHandFn">{{userName}}</span>
        <span class="icon-arrow_down_line color-change" @click="showHandFn"></span>
        <div class="user-info-handler" @mouseleave="hideHandFn" :class="showHand ?'show': ''">
          <ul class="clearfix">
            <li @click="logout" class="logout-btn clearfix">
              <span class="icon-log_out icon-img"></span>
              <span class="text">退出登录</span>
            </li>
          </ul>
        </div>
      </div>
<!--      <span class="user-tips pull-right"><span class="icon-notification"></span></span>-->
    </div>
  </div>
  <!-- <div class="opacityBox"></div> -->
</div>

</template>
<script>
import commonJS from "@/utils/commonJS"
import tenantApi from '@/api/login/tenant'
import platApi from '@/api/login/plat'

export default {
  name: 'Header',
  props: ['changePage'],
  data () {
    return {
      showHand: false,
      userType: this.$store.getters.USERTYPE || '0',
      userId: this.$store.getters.USERID || null,
      userName : '',
      // 租户编码
      tenantCode: '',
      // 用户账号
      loginAccount: '',
    }
  },
  watch: {
    // '$route': {
    //   handler: function (val, oldVal) {
    //     let firstPath = val.matched[0].path;
    //     this.selectNav = this.allNavListData[firstPath]
    //     this.current = val.name
    //   },
    //   deep: true
    // }
  },
  computed: {
    navToggle () {
      return this.$store.getters.NAVTOGGLE
    },
    pageName () {
      if (this.$route.path == '/home') {
        return '首页'
      }
      else {
        return this.navList.menuName
      }
    },
    navList () {
      if (this.$route.path == '/home') {
        return []
      }
      else {
        let idList = commonJS.getParents(this)
        console.log(898888823, idList)
        let lastId = idList[0]

        let page = this.$store.getters.MENULIST.filter(item => item.id == lastId)
        if (page.length > 0) {
          return page[0]
        }
        else {
          return []
        }
      }
    },
    isSelect: function (id) {
      // let flag = commonJS.menuIsSelect(this, path, 0)
      let selectIdList = commonJS.getParents(this)
      return selectIdList
    },
  },
  methods: {
    setNavToggle () {
      let toggleFlag = this.$store.getters.NAVTOGGLE
      this.$store.dispatch('setNavToggle', {toggleFlag: !toggleFlag})
    },
    showHandFn() {
      this.showHand = !this.showHand
    },
    hideHandFn () {
      this.showHand = false;
    },
    goPath(item) {
      let path = commonJS.getNavJumpUrl(item)
      this.$router.push({path: path})
    },
    pageChange (path) {
      this.current = path;
      this.$emit('changePage', path)
      this.$router.push(path)
    },
    setMenuSelect(path, level) {
      return commonJS.menuIsSelect(this, path, level)
    },
    setUserCode (userCode) {
      var oDate = new Date();
      oDate.setDate(oDate.getDate() + 1);//访问页面后的1天过期
      // 1租户
      document.cookie = 'userCode=' + userCode + ';expires=' + oDate.toGMTString()
    },
    // 获取用户信息
    getUserInfo () {
      // 用户
      if (this.userType == '0') {
        platApi.list({id: Number(this.userId)}).then(res => {
          if (res.data.status == 0) {
            let data = res.data.data.list;
            this.userName = data[0].nickName
            this.loginAccount = data[0].userName
            this.setUserCode(this.loginAccount)
          }
        })
      }
      else {
        // 租户
        tenantApi.list({id: Number(this.userId)}).then(res => {
          if (res.data.status == 0) {
            let data = res.data.data.list;
            this.userName = data[0].tenantName
            this.tenantCode = data[0].tenantCode
            this.setUserCode(this.tenantCode)
          }
        })
      }
    },
    setCookieOut () {
      var oDate = commonJS.getDate(0)
      // 清除cookie
      document.cookie = 'userId=' + null + ';expires=' + oDate.toGMTString();
      document.cookie = 'userType=null;expires=' + oDate.toGMTString();
      document.cookie = 'roleId=' + null + ';expires=' + oDate.toGMTString();
      document.cookie = 'token=' + null + ';expires=' + oDate.toGMTString();
      document.cookie = 'userCode=' + null + ';expires=' + oDate.toGMTString();
      // 清除用户信息
      this.$store.dispatch('setUserInfo', {userId: null, userType: null, roleId: null})
      this.$store.dispatch('setMenu', {menu: null})
      this.$store.dispatch('setMenuScope', {scope: null})
      // 清除菜单code
      window.sessionStorage.clear()
      this.$router.push({path: '/login'})
    },
    logout() {
      // 用户
      if (this.userType == '0') {
        platApi.logout(this.loginAccount).then(res => {
          if (res.data.status == 0) {
            this.setCookieOut()
          }
          else {
            this.$store.dispatch('msgModel', {state: 999, msg: res.data.message})
          }
        })
      }
      else {
        tenantApi.logout(this.tenantCode).then(res => {
          if (res.data.status == 0) {
           this.setCookieOut()
          }
          else {
            this.$store.dispatch('msgModel', {state: 999, msg: res.data.message})
          }
        })
      }
    }
  },
  mounted () {

  },
  // watch: {
  //   'navList': function (val, oldVal) {
  //     if (val.length > 0 && JSON.stringify(val) != JSON.stringify(oldVal)) {
  //       let result = val.filter(item => this.current.indexOf(item.pathName) > -1)
  //       if (result.length > 0) {
  //         let path = result[0].path
  //         path && this.$emit('changePage', path)
  //       }
  //     }
  //   }
  // },
  created () {
    this.current = this.$route.path
    this.getUserInfo()
  }
}
</script>

<style lang="less" scoped>
// .opacityBox{
//   width: 100%;
//   height: 8px;
//   // position: relative;
//   // top:56px;
//   // left:0;
//   opacity: 0;
// }
.header-group {
  position: relative;
  width: 100%;
  height: 56px;
  background: #FFFFFF;
  padding: 14px 0 ;
  box-shadow: 0px 1px 0px 0px rgba(229,230,235,1);
  // .level-3-box{
  //   padding-top:0;
  //   top:38px;
  // }
  //border-bottom: 1px solid #e5e6eb;
  .nav-hand {
    cursor: pointer;
    width: 28px;
    height: 28px;
    background: #F2F3F5;
    border-radius: 2px;
    text-align: center;
    margin-left: 16px;
    margin-right: 16px;
    span {
      font-size: 16px;
      line-height: 28px;
    }
    &:hover {
      background: #e5e5e5;
    }
  }
  .user-info {
    float: right;
    padding-right: 16px;
    //line-height: 48px;
    //margin: 0 16px 0 0 ;
    .user-tips,
    .icon-box{
      display: block;
      width: 32px;
      height: 32px;
      border: 1px solid rgba(240,240,240,1);
      border-radius: 50%;
      text-align: center;
      font-size: 16px;
      line-height: 32px;
    }
    .user-tips {
      margin-right: 16px;
    }
    .user-btn {
      cursor: pointer;
      img {
        width: 12px;
        height: 8px;
        margin-top: -2px;
      }
    }
    .user-name-box {
      position: relative;
      cursor: pointer;
      font-size: 12px;
      letter-spacing: 0;
      line-height: 12px;
      font-weight: 400;
      &:hover {
        .color-change {
          color: #4487F7;
        }
      }
      span {
        float:left;
      }
      .user-name {
        margin-left: 8px;
        margin-right: 6px;
        font-size: 14px;
        line-height: 32px;
        color: #1B1E22;
        letter-spacing: 0;
        font-weight: 400;
      }
      .icon-arrow_down_line {
        font-size: 16px;
        line-height: 32px;
      }
    }
    .user-info-handler {
      display: none;
      position: absolute;
      top: 31px;
      right: -2px;
      padding-top: 19px;
      z-index: 99;
      &.show {
        display: block;
      }
      .logout-btn {
        .icon-img {
          font-size: 20px;
          line-height: 40px;
          margin-right: 8px;
        }
      }
      ul {
        z-index: 9999;
        min-width: 160px;
        background: #FFFFFF;
        border: 1px solid rgba(227,230,235,1);
        box-shadow: 0px 31px 31px 0px rgba(10,31,68,0.12);
        border-radius: 4px;
        padding: 8px 0;
        >li {
          padding:0 12px;
          text-align: left;
          font-size: 14px;
          line-height: 40px;
          color: rgba(27,30,34,0.85);
          letter-spacing: 0;
          font-weight: 400;
          &:hover,
          &.select {
            background: #F0F8FF;
            color: #4487F7;
          }
        }
      }

    }
  }
  .level-1 {
    margin-top: 2px;
    padding: 0 16px;
    font-size: 16px;
    line-height: 24px;
    color: rgba(27,30,34,0.85);
    letter-spacing: 0;
    font-weight: 500;
    border-left: 1px solid #E3E6EB;
    border-right: 1px solid #E3E6EB;
  }
  .level-2 {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    >li {
      position: relative;
      cursor: pointer;
      padding: 0 16px;
      font-size: 14px;
      line-height: 24px;
      color: rgba(27,30,34,0.65);
      letter-spacing: 0;
      text-align: center;
      font-weight: 400;
      .liopacityBox{
      width: 100%;
      height:8px;
      opacity: 0;
      z-index: 1000000;
      // background-color: #F2F3F5;
      // background-color: red;
    }
      >span {
        display: block;
        height: 38px;
        width: 100%;
      }
      &:hover,
      &.select {
        font-size: 14px;
        color: #4487F7;
        letter-spacing: 0;
        text-align: center;
        font-weight: 500;
      }
      &.select {
        >span {
          border-bottom: 3px solid #4487F7;
        }
      }


       &:hover {
         .level-3-box {
           display: block;
         }
       }
    }
  }
  .level-3-box {
    display: none;
    // padding-top: 8px;
    position: absolute;
    min-width: 160px;
    left: 0;
    &:active{
      display: none;
    }
  }

  .level-3 {
    position: absolute;
    top:0px;
    z-index: 9999;
    min-width: 160px;
    background: #FFFFFF;
    border: 1px solid rgba(227,230,235,1);
    box-shadow: 0px 31px 31px 0px rgba(10,31,68,0.12);
    border-radius: 4px;
    padding: 8px 0;
    >li {
      position: relative;
      padding-left: 12px;
      text-align: left;
      font-size: 14px;
      line-height: 40px;
      color: rgba(27,30,34,0.85);
      letter-spacing: 0;
      font-weight: 400;
      span{
        display: block;
      }
      &:hover,
      &.select {
        background: #F0F8FF;
        color: #4487F7;
      }
      &:hover {
        .level-4-box {
          display: block;
        }
      }
    }
  }
  // /deep/.level-3::before{
  //   content: '' !important;
  //   display: block !important;
  //   height:8px !important;
  //   width: 100% !important;
  //   opacity:0 !important;
  //   position: absolute;
  //   top:-8px;
  //   left:0;
  // }
  .level-4-box {
    display: none;
    position: absolute;
    left: 100%;
    top: -3px;
    min-width: 160px;
    .level-4 {
      margin-left: 8px;
      background: #FFFFFF;
      border: 1px solid rgba(227,230,235,1);
      box-shadow: 0px 31px 31px 0px rgba(10,31,68,0.12);
      border-radius: 4px;
      padding: 8px 0;
      >li {
        position: relative;
        padding-left: 12px;
        text-align: left;
        font-size: 14px;
        line-height: 41px;
        color: rgba(27,30,34,0.85);
        letter-spacing: 0;
        font-weight: 400;
        span{
          display:block;
          // display: inline-block;
          // margin-left:12px;
        }
        &:hover,
        &.select {
          background: #F0F8FF;
          color: #4487F7;
        }
      }
    }

    //display: none;





  }
  .child-icon {
    position: absolute;
    right: 10px;
    top: 12px;
    font-size: 16px;
    transform: rotate(-90deg);
  }
}

</style>
